<template>
  <view>
    <!-- 显示拍照按钮 -->
    <button @click="takePhoto">拍照</button>
    <!-- 显示从图库选择按钮，位于页面右下角 -->
    <button class="gallery-button" @click="openGallery">拍摄图库</button>
    <!-- 显示拍摄的照片 -->
    <image v-if="imageSrc" :src="imageSrc"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 存储拍摄的照片的临时路径
      imageSrc: ''
    };
  },
  methods: {
    // 调用相机拍照的方法
    takePhoto() {
      uni.chooseImage({
        count: 1,
        sourceType: ['camera'],
        success: (res) => {
          this.imageSrc = res.tempFilePaths[0];
        },
        fail: (err) => {
          console.error('拍照失败:', err);
        }
      });
    },
    // 从图库选择图片的方法
    openGallery() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: (res) => {
          this.imageSrc = res.tempFilePaths[0];
        },
        fail: (err) => {
          console.error('从图库选择图片失败:', err);
        }
      });
    }
  }
};
</script>

<style>
button {
  margin: 10px;
  padding: 10px;
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 5px;
}
.gallery-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
image {
  width: 300px;
  height: 300px;
  margin: 10px;
  display: block;
}
</style>